<template>
  <el-breadcrumb separator="/" class="breadcrumb">
    <el-breadcrumb-item v-for="(item, index) in breadcrumbList" :key="item.path">
      <span v-if="index === breadcrumbList.length - 1">{{ item.meta.title || item.name }}</span>
      <router-link v-else :to="item.path">{{ item.meta.title || item.name }}</router-link>
    </el-breadcrumb-item>
  </el-breadcrumb>
</template>

<script setup>
import { computed } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
const breadcrumbList = computed(() => route.matched.filter(r => r.meta && r.meta.title))
</script>

<style scoped>
.breadcrumb {
  margin: 16px 0;
}
</style>
